<template>
  <div class="wai">
    <div class="top">
      <div class="left">
        <div class="shang">
          <div> 仓库编号</div>
          <div>仓库名称</div>
          <div>仓库状态</div>
        </div>
        <div class="xia">
          <el-input v-model="input"  style="width: 200px" placeholder="请输入内容"></el-input>
      <el-input v-model="input"  style="width: 200px" placeholder="请输入内容"></el-input>
      <template>
  <el-select v-model="value" size="small" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
        </div>
      </div>
      <div class="right">
        <el-button type="warning" round>搜索</el-button>
        <el-button  round>重置</el-button>

      </div>
    </div>

    <div class="button">
     <div class="shang">
      <el-button type="success" round>新增仓库</el-button>
     </div>
     <div class="xia">
      <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="序号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="仓库编码"
      width="100">
    </el-table-column>
    <el-table-column
      prop="province"
      label="仓库名称"
      width="100">
    </el-table-column>
    <el-table-column
      prop="city"
      label="仓库类型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="address"
      label="省/市/区"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="详细地址"
      width="100">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="仓库状态"
      width="100">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="仓库面积m²"
      width="100">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="库区数量"
      width="100">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="负责人"
      width="100">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="联系电话"
      width="100">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="更新时间"
      width="100">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
     </div>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>

<script>
import { getManageMentAi } from '@/api/index'
export default {
  data () {
    return {
      input: '',
      currentPage4: 4,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },
  methods: {
    created () {
      this.getManageMentAi()
    },
    async getManageMentAi () {
      const res = await getManageMentAi()
      console.log(res)
    },

    handleClick (row) {
      console.log(row)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }

}
</script>

<style lang="scss" scoped>
.wai {
  width: 1250px;
  .top {
    height: 40px;
    width: 1200px;
    background: #ff65;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    color: #887e7e;
    font-size: 12px;
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight: 500;
    .left {
      width: 803px;

      .shang{
        display: flex;
        justify-content: space-between;

      }
      .xia{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    font-family: PingFangSC,PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    // color: #332929;
    color: #1f2d3d;
    // display: inline-block;
    font-size: inherit;
      }
    }

  }
  .button {
  height: 400px;
    width: 1250px;
    background: #ffffff;
    border-radius: 12px;
.shang {
  margin-left: 30px;
    margin-top: 10px;
    margin-bottom: 10px;

    height: 40px;
    border-radius: 20px;
    border: 0;
    font-size: 14px;
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight: 500;
    // text-align: center;
    // line-height: 40px;
    // padding-left: 26px;
    // padding-right: 26px;
    // cursor: pointer;
    // outline: 0;
}
.xia{
  font-size: 13px;
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight: 500;
    color: #887e7e;
}
  }
}
</style>
